<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <!--1.引入相关的库文件-->
    <script src="../lib/vue_2.5.22.js"></script>
    <script src="../lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!--
  1.引入相关的库文件
  2.添加路由链接
  3.添加路由填充位
  4.定义路由组件
  5.配置路由规则并创建路由实例
  6.把路由挂载到vue根实例中
-->


<!-- 被vm实例所控制的区域-->
<div id="app">
    <!-- 2.添加路由链接-->
    <!-- router-link是vue中提供的标签, 默认会被渲染为a标签 -->
    <!-- to属性默认会被渲染为href属性 -->
    <!-- to属性的值默认会被渲染为 # 开头的hash地址-->
    <router-link to="/user">User</router-link>
    <router-link to="/register">register</router-link>


    <!-- 3.添加路由填充位-->
    <!-- 路由填充位 (也叫做路由占位符)-->
    <!-- 将来通过路由规则匹配到的组件, 将会被渲染到router-view所在的位置-->
    <router-view></router-view>
</div>

<script>

    /**
     * 4.定义路由组件
     * 定义了两个对象User和register, 都有一个属性值为template
     *
     * @type {{template: string}}
     */
    const User = {
        template: '<h1>User组件</h1>'
    }

    const Register = {
        template: `<div>
            <h1>Register组件</h1>
            <hr/>

            <p hidden>子路由链接</p>
            <router-link to="/register/tab1">tab1</router-link>
            <router-link to="/register/tab2">tab2</router-link>

            <p hidden>子路由的占位符</p>
            <router-view></router-view>
        </div>`
    }

    const Tab1 = {
        template: '<h3>tab1组件</h3>'
    }
    const Tab2 = {
        template: '<h3>tab2组件</h3>'
    }


    const vueRouter = new VueRouter({
        // routes是路由规则数组
        routes: [
            // 每个路由规则都是一个配置对象, 其中至少包含path和component两个属性
            // path表示当前路由规则匹配的hash地址
            // component表示当前路由规则对应要展示的组件
            // 其中, path表示需要被重定向的原地址, redirect表示将要被重定向的新地址
            // 当访问 / 路径的时候, 默认会跳换到 /user路径下
            {path: '/', redirect: '/user'},
            {path: '/user', component: User},
            // 父路由通过children属性配置子级路由
            // children 数组表示子路由规则
            {
                path: '/register', component: Register, children: [
                    {path: "/register/tab1", component: Tab1},
                    {path: "/register/tab2", component: Tab2}
                ]
            }


        ]
    });


    /**
     * 6.创建vm实例对象, 并路由挂载到vue跟实例中
     */
    new Vue({
        // 指定控制的区域
        el: "#app",
        data: {},
        // 挂载路由实例对象
        // 当属性名和 值一样时, 可以简写
        // router : router
        // router
        router: vueRouter
    })

</script>


</body>
</html>